<form id="goagent-config" method="POST" onSubmit="onSubmit(); return false;">
    <div class="row-fluid">
        <div class="span4">
            <label for="gae-appid">GAE AppID </label>
        </div> <!-- .span4 -->
        <div class="span8">
            <input id="gae-appid" type="text" placeholder="默认使用公共AppID"/>
            <div id="gae-appid-tip" class="hide">
                <p>
                    <span color="red">公共AppID不能看视频、下载文件。</span>
                    <a href="https://github.com/XX-net/XX-Net/wiki/Register-Google-appid" target="_blank">(怎么申请)</a>
                </p>
            </div>
        </div> <!-- .span8 -->
    </div> <!-- .row-fluid -->
    <div class="row-fluid">
        <div class="span4">
            <label for="advanced-options"><i class="icon icon-chevron-right"></i> 高级选项</label>
        </div> <!-- .span4 -->
    </div> <!-- .row-fluid -->
    <div id="advanced-options" style="display: none;">
        <div class="row-fluid">
            <div class="span4">
                <label for="gae-password">RC4 Password(<a href="https://github.com/XX-net/XX-Net/wiki/Rc4-password-problem" target="_blank">帮助</a>)</label>
            </div> <!-- .span4 -->
            <div class="span8">
                <input id="gae-password" type="password" placeholder="一般无需配置" />
            </div> <!-- .span8 -->
        </div> <!-- .row-fluid -->
        <div class="row-fluid">
            <div class="span4">
                <label for="deploy-via-gae">通过GAE进行部署<a href="https://github.com/XX-net/XX-Net/wiki/Deploy-By-GAE" target="_blank">(帮助)</a></label>
            </div> <!-- .span4 -->
            <div class="span8">
                <input id="deploy-via-gae" type="checkbox" data-toggle="switch" />
            </div> <!-- .span8 -->
        </div> <!-- .row-fluid -->
        <div class="row-fluid">
            <div class="span4">
                <label for="use-ipv6">使用ipv6</label>
            </div> <!-- .span4 -->
            <div class="span8">
                <input id="use-ipv6" type="checkbox" data-toggle="switch" />
            </div> <!-- .span8 -->
        </div> <!-- .row-fluid -->
        <div class="row-fluid">
            <div class="span4">
                <label for="ip-connect-interval">Google IP使用频率限制<a href="https://github.com/XX-net/XX-Net/wiki/About-ip-connect-interval" target="_blank">(帮助)</a></label>
            </div> <!-- .span4 -->
            <div class="span8">
                <input id="ip-connect-interval" type="text" value="10" />
            </div> <!-- .span8 -->
        </div> <!-- .row-fluid -->
        <div class="row-fluid">
            <div class="span4">
                <label for="enable-proxy">局域网代理(一般无需配置) <a href="https://github.com/XX-net/XX-Net/wiki/GoAgent-Intranet-proxy" target="_blank">(帮助)</a></label>
            </div> <!-- .span4 -->
            <div class="span8">
                <input id="enable-proxy" type="checkbox" data-toggle="switch" />
            </div> <!-- .span8 -->
        </div> <!-- .row-fluid -->
        <div id="proxy-options" style="display: none;">
            <div class="row-fluid">
                <div class="span4">
                    <label for="proxy-type">代理服务器类型</label>
                </div> <!-- .span4 -->
                <div class="span8">
                    <select id="proxy-type">
                        <option value="HTTP">HTTP</option>
                        <option value="SOCKS4">SOCKS 4</option>
                        <option value="SOCKS5">SOCKS 5</option>
                    </select>
                </div> <!-- .span8 -->
            </div> <!-- .row-fluid -->
            <div class="row-fluid">
                <div class="span4">
                    <label for="proxy-host">代理服务器地址</label>
                </div> <!-- .span4 -->
                <div class="span8">
                    <input id="proxy-host" type="text" placeholder="Example: 127.0.0.1" />
                </div> <!-- .span8 -->
            </div> <!-- .row-fluid -->
            <div class="row-fluid">
                <div class="span4">
                    <label for="proxy-port">端口</label>
                </div> <!-- .span4 -->
                <div class="span8">
                    <input id="proxy-port" type="text" placeholder="Example: 808" />
                </div> <!-- .span8 -->
            </div> <!-- .row-fluid -->
            <div class="row-fluid">
                <div class="span4">
                    <label for="proxy-username">用户名</label>
                </div> <!-- .span4 -->
                <div class="span8">
                    <input id="proxy-username" type="text" />
                </div> <!-- .span8 -->
            </div> <!-- .row-fluid -->
            <div class="row-fluid">
                <div class="span4">
                    <label for="proxy-password">密码</label>
                </div> <!-- .span4 -->
                <div class="span8">
                    <input id="proxy-password" type="password" />
                </div> <!-- .span8 -->
            </div> <!-- .row-fluid -->
        </div> <!-- #proxy-options -->
        <div class="row-fluid">
            <div class="span4">
                小贴士: <a href="https://github.com/XX-net/XX-Net/wiki/GoAgent-manual-config" target="_blank">如何通过文件配置</a>
            </div> <!-- .span4 -->
        </div> <!-- .row-fluid -->
    </div> <!-- #advanced-options -->
    <div class="row-fluid">
        <div class="span12">
            <button class="btn btn-primary btn-block" type="submit">保存并重启GoAgent</button>
        </div> <!-- .span12 -->
    </div> <!-- .row-fluid -->
</form> <!-- #goagent-config -->

<!-- JavaScript -->
<script type="text/javascript">
    title('配置GoAgent');
</script>
<script type="text/javascript">
    $(function() {
        $('[data-toggle=switch]').wrap('<div class="switch" />').parent().bootstrapSwitch();
    });
</script>
<script type="text/javascript">
    $('label[for=advanced-options]').click(function() {
        var isAdvancedOptionsShown = $('#advanced-options').is(':visible');

        if ( !isAdvancedOptionsShown ) {
            $('i.icon', this).removeClass('icon-chevron-right');
            $('i.icon', this).addClass('icon-chevron-down');
            $('#advanced-options').slideDown();            
        } else {
            $('i.icon', this).removeClass('icon-chevron-down');
            $('i.icon', this).addClass('icon-chevron-right');
            $('#advanced-options').slideUp();
        }
    });
</script>
<script type="text/javascript">
    $('#enable-proxy').change(function() {
        var isChecked = $(this).is(':checked');

        if ( isChecked ) {
            $('#proxy-options').slideDown();
        } else {
            $('#proxy-options').slideUp();
        }
    });
</script>
<script type="text/javascript">
    $(function() {
        $.ajax({
            type: 'POST',
            url: 'http://127.0.0.1:8084/config?cmd=get_config',
            dataType: 'JSON',
            success: function(result) {
                $('#gae-appid').val(result['appid']);
                if( !result['appid'] || result['appid'] == '' ){
                    $('#gae-appid-tip').removeClass("hide");
                }
                $('#gae-password').val(result['password']);

                if ( result['host_appengine_mode'] == 'gae' ) {
                    $('#deploy-via-gae').parent().removeClass('switch-off');
                    $('#deploy-via-gae').parent().addClass('switch-on');
                    $('#deploy-via-gae').prop('checked', true);
                }
                $('#ip-connect-interval').val(result['ip_connect_interval'] || 10);

                if ( typeof(result['proxy_enable']) != 'undefined' && result['proxy_enable'] != 0 ) {
                    $('#enable-proxy').parent().removeClass('switch-off');
                    $('#enable-proxy').parent().addClass('switch-on');

                    $('#enable-proxy').prop('checked', true);
                    $('#proxy-options').slideDown();
                }
                $('#proxy-type').val(result['proxy_type']);
                $('#proxy-host').val(result['proxy_host']);
                $('#proxy-port').val(result['proxy_port']);
                $('#proxy-username').val(result['proxy_user']);
                $('#proxy-password').val(result['proxy_passwd']);
                if ( result['use_ipv6'] == 1 ) {
                    $('#use-ipv6').parent().removeClass('switch-off');
                    $('#use-ipv6').parent().addClass('switch-on');
                    $('#use-ipv6').prop('checked', true);
                }
            },
            error: function(){
                tip('读取设置失败.', 'error');
            }
        });     
    });
</script>
<script type="text/javascript">
    function onSubmit() {
        var gaeAppId          = $('#gae-appid').val(),
            gaePassword       = $('#gae-password').val(),
            hostAppEngine     = $('#deploy-via-gae').is(':checked') ? 'gae' : 'direct',
            ipConnectInterval = $('#ip-connect-interval').val(),
            useIpv6           = $('#use-ipv6').is(':checked') ? 1 : 0,
            enableProxy       = $('#enable-proxy').is(':checked') ? 1 : 0,
            proxyType         = $('#proxy-type').val(),
            proxyHost         = $('#proxy-host').val(),
            proxyPort         = $('#proxy-port').val(),
            proxyUsername     = $('#proxy-username').val(),
            proxyPassword     = $('#proxy-password').val();

        return setConfig(gaeAppId, gaePassword, hostAppEngine, ipConnectInterval, useIpv6,
                            enableProxy, proxyType, proxyHost, proxyPort, proxyUsername, proxyPassword);
    }
</script>
<script type="text/javascript">
    function setConfig(gaeAppId, gaePassword, hostAppEngine, ipConnectInterval, useIpv6,
                            enableProxy, proxyType, proxyHost, proxyPort, proxyUsername, proxyPassword) {
        var config = {
            'appid': gaeAppId,
            'password': gaePassword,
            'host_appengine_mode': hostAppEngine,
            'ip_connect_interval': ipConnectInterval,
            'use_ipv6': useIpv6,
            'proxy_enable': enableProxy,
            'proxy_type': proxyType,
            'proxy_host': proxyHost,
            'proxy_port': proxyPort,
            'proxy_user': proxyUsername,
            'proxy_passwd': proxyPassword
        };

        $.ajax({
            type: 'POST',
            url: 'http://127.0.0.1:8084/config?cmd=set_config',
            data: config,
            dataType: 'JSON',
            success: function(result) {
                if ( result['res'] == 'success' ) {
                    tip('设置已成功保存.', 'success');
                } else {
                    tip('发生未知错误.', 'error');
                }
            }
        });
    }
</script>